<template>
	<div class="add-staff-manager">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" :rules="rules" label-width="auto" class="demo-ruleForm">
					<div class="content_info">
						<template v-if="propUpType !== 'detail'">
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.namePerson')" prop="name">
										<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.phone')" prop="phone">
										<el-input v-model="info.phone" type="number" @mousewheel.native.prevent @keydown.native.up.prevent
											@keydown.native.down.prevent @keydown.native.tab.prevent
											:placeholder="$t('placeholderTip.enter') + $t('placeholderTip.loginAccount')" show-word-limit />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('formLabel.imagePhoto')" prop="imagePhoto">
										<div class="avatar-uploader">
											<upload-img customsrc="true" :defsrc="info.imagePhoto"
												:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'imagePhoto') }">
												<i class="el-icon-plus avatar-uploader-icon" />
											</upload-img>
										</div>
										<div v-if="info.imagePhoto" class="deleteImg" @click.stop="deleteImg(info, 'imagePhoto')">
											<img src="@/assets/images/close.png">
										</div>
										<div class="tipInfo">（{{ $t('text.recommendedSize') }}300px*450px）</div>
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item :label="$t('formLabel.sex')">
										<el-radio-group :value="info.sex" v-model="info.sex">
											<el-radio :label=1>{{ $t('text.male') }}</el-radio>
											<el-radio :label=2>{{ $t('text.female') }}</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('formLabel.birthday')" prop="birthday">
										<el-date-picker v-model="info.birthday" type="date" :placeholder="$t('placeholderTip.pSelect')"
											format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:100%" />
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.idCard')" prop="cardNo">
										<el-input v-model="info.cardNo" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('formLabel.position')" prop="positionId">
										<el-select v-model="info.positionId" multiple filterable clearable
											:placeholder="$t('placeholderTip.pSelect')" style="width:100%;">
											<el-option v-for="item in positionList" :key="item.id" :label="item.name" :value="item.id" />
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.superiorTitle')" prop="superiorId">
										<el-cascader ref="elCascader" :key="isResouceShow" v-model="info.superiorId" :options="hierarchyList"
											:props="optionProps" clearable filterable style="width:100%" @change="handleChange" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.fullAddress')">
										<el-input v-model="info.address" type="textarea" rows=1 :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
							</el-row>
						</template>
						<template v-else>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.namePerson')" prop="name">
										<el-input readonly v-model="info.name" />
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.phone')" prop="phone">
										<el-input readonly v-model="info.phone" />
									</el-form-item>
								</el-col>

							</el-row>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('formLabel.imagePhoto')">
										<div class="avatar-uploader">
											<upload-img :preview="true" :defsrc="info.imagePhoto" disabled />
										</div>
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item :label="$t('formLabel.sex')">
										<el-radio-group readonly v-model="info.sex">
											<el-radio v-if="info.sex === 1" :label=1>{{ $t('text.male') }}</el-radio>
											<el-radio v-if="info.sex === 2" :label=2>{{ $t('text.female') }}</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('formLabel.birthday')" prop="birthday">
										<el-input readonly v-model="info.birthday" />
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.idCard')" prop="cardNo">
										<el-input readonly v-model="info.cardNo" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('formLabel.position')" prop="positionId">
										<el-input readonly v-model="info.positionName" />
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.superiorTitle')" prop="superiorId">
										<el-input readonly v-model="info.superiorName" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="10">
									<el-form-item :label="$t('publicFormLabel.fullAddress')">
										<el-input readonly v-model="info.address" type="textarea" rows=3 />
									</el-form-item>
								</el-col>
							</el-row>
						</template>
					</div>
				</el-form>
				<div class="footerBtn">
					<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
						$t('el.popconfirm.close') }}</el-button>
					<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
						v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {
	getStaffInfo,
	setStaffSave,
	setStaffUpdate,
	getPositionPositionList
} from '@/api/organizational-chart'
import {
	getHierarchySuperList
} from '@/api/public'
import UploadImgSimple from '@/components/Upload/UploadImgSimple'
import UploadImgSimples from '@/components/Upload/UploadImgSimple_more'
import defaultSettings from '@/settings'
export default {
	name: 'CompanyManagerInfo',
	components: {
		UploadImg: UploadImgSimple,
		UploadImgs: UploadImgSimples //多张图片
	},
	data() {
		return {
			BASE_IMG: defaultSettings.BASE_IMG,
			limit: 5,
			info: {
				name: '', // 名称
				phone: '',//电话
				sex: 1,//性别 1:男 2:女
				imagePhoto: '', // 形象照
				positionId: [],//职位id 多选
				superiorId: '',//所属上级id
				address: '', // 详细地址
				status: 1, // 状态 
			},
			isResouceShow: 0,
			hierarchyList: [],//所属上级
			positionList: [],//职位
			optionProps: {
				expandTrigger: 'click',
				checkStrictly: true,
				value: 'id',
				label: 'name',
				children: 'children',
				emitPath: false
			},
			rules: {
				phone: [
					{
						required: true,
						message: this.$t('placeholderTip.enter') + this.$t('placeholderTip.loginAccount'),
						trigger: 'blur'
					}
				],
				name: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				imagePhoto: [
					{
						required: true,
						message: this.$t('placeholderTip.pUpload'),
						trigger: 'blur'
					}
				],
				superiorId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				positionId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
			},
			countryList: [], // 省列表
			oblastList: [], // 市列表
			cityList: [], // 区列表
			propUpType: '', // 'add' edit detail
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 8.64e7
				}
			},
			fullscreenLoading: false,
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
	},
	watch: {
		hierarchyList: {
			handler(newVal) {
				if (newVal.length === 0) {
					++this.isResouceShow
				}
			}
		},
		'info.imagePhoto': function (val) {
			if (val && val.length > 0) {
				// 清除 提报上传 校验
				let formField = this.$refs['info'].fields
				formField.map(i => {
					if (i.prop === 'imagePhoto') {
						i.clearValidate()
						return false
					}
				})
			}
		},
	},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		if (this.$route.query.propUpType === 'add') {
			this.getHierarchySuperListData()
			this.getPositionPositionListData()
		} else if (this.$route.query.id) {
			if (this.$route.query.propUpType === 'edit') {
				this.getHierarchySuperListData()
				this.getPositionPositionListData()
			}
			this.getInfo(this.$route.query.id)
		}
	},
	created() {
		console.log('created')
	},
	activated() { },

	destroyed() { },
	methods: {
		// 所属上级
		getHierarchySuperListData() {
			getHierarchySuperList(3)
				.then(res => {
					if (res.code === 200) {
						this.hierarchyList = res.data
					}
				})
				.catch(err => {
					console.log(err, 'err')
				})
		},
		deleteImg(tar, key) {
			tar[key] = ''
		},
		handleAvatarSuccess(res, file, tar, key) {
			if (res) {
				tar[key] = res.key
			}
		},
		// 职位类型
		getPositionPositionListData() {
			getPositionPositionList().then(res => {
				if (res.code === 200) {
					this.positionList = res.data
				}
			})
		},
		// 所属上级
		handleChange(e) {
			if (e) {
				// 单选 关闭
				this.$refs.elCascader.dropDownVisible = false // 收起下拉
			} else {
				this.info.superiorId = ''
			}
		},
		// 提交
		addSubmitForm() {
			this.$refs['info'].validate(valid => {
				if (valid) {
					var obj = JSON.parse(JSON.stringify(this.info))
					var birthday = ''
					if (obj.birthday) {
						birthday = obj.birthday + ' ' + '23:59:59'
					}
					var positionName = []
					this.positionList.filter(item => {
						for (var i = 0; i < obj.positionId.length; i++) {
							if (obj.positionId[i] === item.id) {
								positionName.push(item.name)
							}
						}
					})
					var params = {
						name: obj.name, // 员工姓名
						phone: obj.phone, // 手机号
						sex: obj.sex, // 1男 2女
						imagePhoto: obj.imagePhoto, //形象照
						birthday: birthday, // 生日
						cardNo: obj.cardNo, // 身份证
						positionId: obj.positionId.toString(), // 职位id
						positionName: positionName.toString(), // 职位名称
						superiorId: obj.superiorId, // 所属上级id
						address: obj.address, // 地址
					}
					this.fullscreenLoading = true
					if (this.propUpType === 'add') {
						setStaffSave(params)
							.then(res => {
								if (res.code === 200) {
									this.$message({
										showClose: true,
										message: this.$t('text.addSucceedTip'),
										type: 'success'
									})
									this.fullscreenLoading = false
									this.getCancle()
								}
							})
							.catch(err => {
								this.fullscreenLoading = false
								console.log(err, 'err')
							})
					} else {
						params['id'] = obj.id
						params['branchId'] = obj.branchId
						params['companyId'] = obj.companyId
						setStaffUpdate(params)
							.then(res => {
								if (res.code === 200) {
									this.$message({
										showClose: true,
										message: this.$t('text.editSucceedTip'),
										type: 'success'
									})
									this.fullscreenLoading = false
									this.getCancle()
								}
							})
							.catch(err => {
								this.fullscreenLoading = false
								console.log(err, 'err')
							})
					}
				} else {
					return false
				}
			})
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getStaffInfo(id).then(res => {
				if (res.code === 200) {
					if (this.propUpType !== 'detail') {
						this.getHierarchySuperListData(res.data.superiorId)
					}
					this.$nextTick(() => {
						res.data.positionId = res.data.positionId.split(',').map(Number)
					})
					this.info = res.data
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.add-staff-manager {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;


			&>.el-form {
				width: 100%;
				height: calc(100% - 40px);

				&>.content_info {
					width: 100%;
					height: 100%;
					overflow: hidden;
					overflow-y: auto;

					.line {
						height: 1px;
						border: 1px solid #ebeef5;
					}

					.el-table {
						::v-deep th {
							line-height: 40px;
							padding: unset;
							background-color: #f2f2f2;
						}
					}
				}


			}

			.footerBtn {
				width: 100%;
				display: flex;
				justify-content: center;
			}

			.cardBox {
				width: 104px;
				height: auto;
				float: left;
				position: relative;

				&>.name {
					text-align: center;
					color: #999;
					font-size: 12px;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>

